<template>
  <view class="message">
    <view
      class="body-content"
      v-for="(item, index) in $store.state.conversationList"
      :key="index"
      :class="modalName == 'move-box-' + index ? 'move-cur' : ''"
      @touchstart="ListTouchStart"
      @touchmove="ListTouchMove"
      @touchend="ListTouchEnd"
      :data-target="'move-box-' + index"
    >
      <view class="content-view" @click="go(item)">
        <view :key="index" class="contacts-item">
          <view v-show="item.unreadMessageCount > 0" class="unread">
            {{ item.unreadMessageCount }}
          </view>
          <image
            :src="
              item.conversationAvatarUrl
                ? item.conversationAvatarUrl
                : 'https://api.xiaozhucaishui.com/assets/img/avatar.png'
            "
            class="avatar"
            mode="aspectFill"
            alt=""
            :lazy-load="true"
          />
          <view class="contacts-info">
            <view class="top_info">
              <view class="name">
                {{ item.conversationName }}
              </view>
              <view class="time">{{
                item.lastMessage
                  ? parseTimeDot(item.lastMessage.timestamp, "{m}-{d}")
                  : ""
              }}</view>
            </view>
            <view class="text-ellipsis">
              {{ getShowMessage(item) }}
            </view>
          </view>
        </view>
      </view>
      <view class="move">
        <view class="bg-red" @click="deleteConversation(item)">删除</view>
      </view>
    </view>
    <view
      v-show="$store.state.conversationList.length == 0"
      class=""
      style="padding-top: 40rpx"
    >
      <u-empty mode="message"></u-empty>
    </view>

    <u-modal
      :show="delShow"
      title="提示"
      content="确认删除？"
      showCancelButton
      @cancel="delShow = false"
      @confirm="confirmDel"
    >
    </u-modal>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../enterpriseServer/message/index"
></script>

<style lang="scss" scoped>
.message {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  overflow: hidden;
}

.contacts-item {
  flex: 1;
  display: flex;
  align-items: center;
  height: 175rpx;
  max-height: 175rpx;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #ededed;
  position: relative;

  &:active {
    background-color: #f7f8fa;
  }

  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
  }

  .contacts-info {
    padding-left: 22rpx;

    .top_info {
      width: calc(100vw - 180rpx);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        width: 480rpx !important;
        font-size: 36rpx;
        font-weight: 500;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }

    .time {
      font-size: 24rpx;
      color: #999999;
      line-height: 40rpx;
    }

    .text-ellipsis {
      font-size: 24rpx;
      color: #999999;
      padding-top: 18rpx;
    }
  }

  .unread {
    position: absolute;
    right: 20rpx;
    bottom: 40rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 36rpx;
    line-height: 36rpx;
    text-align: center;
    font-size: 24rpx;
    color: #ffffff;
    background: #ff6161;
  }
}

.body-content {
  background-color: #fff;
  transition: all 0.4s ease-in-out 0s;
  transform: translateX(0upx);
  display: flex;
  align-items: center;

  .content-view {
    flex: 1;
  }

  .move {
    position: absolute;
    right: 0;
    display: flex;
    width: 130upx;
    height: 175rpx;
    transform: translateX(100%);

    .bg-red {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
  }
}

.move-cur {
  transform: translateX(-130upx);
}
</style>
